<template>
	<div class="showalert">
		<div class="sysmsgalert">
			<div class="sysmsgcontent">
				<button class="result_close" @click="resultClose"></button>
				<div class="sysimg">
					<img style="margin-top:-20px;" src="../assets/images/nono.png?v=1">
					<p class="bb" v-html="intro.text1"></p>
					<p class="info" v-html="intro.text2"></p>
				</div>
				<div class="sysbutton">
					<a class="btn invitation">{{intro.btn1}}</a><button class="btn once start">{{intro.btn2}}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		name:"showAlert",
		props:['intro'],
		data(){
			return {
				Showalert:false,
			}
		},
		methods:{
			resultClose(){
				this.$emit("listenShowalert",this.Showalert)
			}	
		}
	}
</script>

<style lang="less" scoped>
	.sysmsgalert {
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 11;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.3);
	}

	.sysmsgcontent {
	    position: relative;
	    width: 280px;
	    height: 360px;
	    margin: 45% auto 0;
	    background: url(../assets/images/zhuaqu_result.png) no-repeat center;
	    background-size: cover;
	    border-radius: 5px;
	}

	.sysmsgcontent .sysimg {
	    padding-bottom: 35px;
	    padding-top: 20px;
	    text-align: center;
	}
	.sysmsgcontent .result_close {
	    display: block;
	    position: absolute;
	    right: 5px;
	    top: 5px;
	    width: 30px;
	    height: 30px;
	    background: transparent;
	    background: url(../assets/images/result_close.png) no-repeat center;
	    background-size: 100%;
	}

	.sysmsgcontent .sysimg.addbg {
	    background: url(../assets/images/gameovery.png) no-repeat center;
	    background-size: 100%;
	}

	.sysmsgcontent .sysimg .title {
	    padding: 15px 0;
	    font-size: 20px;
	    color: #ffc50e;
	}

	.sysmsgcontent .sysimg img {
	    width: 60%;
	}
	.sysmsgcontent .sysimg p {
	    font-size: 14px;
	    color: #f23a3a;
	    text-align: center;
	    margin-top: 15px;
	    color: #848484;
	}

	.sysmsgcontent .sysimg p.bb {
	    font-weight: 600;
	    color: #000;
	}
	.sysbutton .btn {
	    display: inline-block;
	    font-size: 14px;
	    width: 120px;
	    height: 40px;
	    margin: 0 5px;
	    line-height: 40px;
	    background: transparent;
	    cursor: pointer;
	    border-radius: 3px;
	    text-align:center;
	}

	.sysbutton .btn.invitation {
	    border: 1px solid #ddd;
	    color: #666;
	}

	.sysbutton .btn.once {
	    background: #fdda2c;
	    color: #000;
	}

	.sysbutton .btn.once span {
	    color: #f90303;
	}
</style>